<!--
 * @Description: 
 * @Author: ghy
 * @Date: 2025-09-12 15:55:10
 * @LastEditors: ghy
 * @LastEditTime: 2025-09-14 22:54:56
-->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星享俱乐部|星巴克</title>
    <link rel="apple-touch-icon" sizes="180x180" href="https://www-static.chinacdn.starbucks.com.cn/prod/assets/favicons/apple-touch-icon.png">
    <style>
        .flex-container{
            display: flex;
            gap:20px;
            align-items: center;
        }
        .DaoHang{
            font-weight: 800;
            font-size: 20px;
        }
        .box{
            margin-top:10px;
            margin-left: 60px;
        }
        .DengLu{
            margin-top: 250px;
            margin-left: 85px;
            position: relative;
            width: 400px;
            height: 350;
        }
        .img-denglu{
            position: absolute;
            top: 15px;
            right: 30px;
            width: 70px;
        }
        .text-denglu{
            position: absolute;
            top: 40px;
        }
        .BUTTON{
            position: relative;
            width: 250px;
            height: 250px;
            
            top: 100px;
            
            }
        .button-denglu{
            text-decoration-line: underline;
            text-decoration-color: #00A862;
            text-decoration-thickness: 4spx;
            text-underline-offset: 6px;
            font-weight: 800;
            font-size: 20px;
        }
        .button-zhuce{
            font-size: 20px;
            color: #707070;
        }
        .button-club{
            font-size: 20px;
            color: #707070;
        }
        .YouShang{
            width:1350;
            height: 550px;
            margin-left:550px ;
            margin-top: -1050px;
        }
        .YouShang{
            height: 500px;
            width: 1300px;
        }
        .ShuRu{
            width: 800px;
            height: 80px;
            border-color: #00A862;
            font-size: 25px;
            border: none;
            border-bottom: 2px solid #ddd;
            margin-top:-50px;
            margin-left: 200px;
        }
        .custom-checkbox{
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            margin-top: 30px;
            margin-left:200px;
    
        }
        
    </style>

    
</head>
<body>
    <div style="background-color: rgb(255, 255, 255); width: 1850px; height: 1050px;">
        <div style="background-color: rgb(255, 255, 255); width: 550px;height: 1050px;">
            <div class="flex-container" style="background-color: rgb(255, 255, 255); width: 550px; height:150px;">
                <img  src="图片/403f71ef-9a1a-4ed6-ade5-4bda8cef1b2d.png" width="100" height="100">
                <div class="DaoHang">门店</div> 
                <div class="DaoHang">我的账户</div>
                <div class="DaoHang">菜单</div>
                <img class="box" src="图片/45c02995-59cd-4df2-9d17-d1aebadadeff.png" width="80" height="80">
            </div>
            <div class="DengLu" style="background-color: rgb(255, 255, 255); width: 400px; height: 350px ;">
                <div>
                    <div class="text-denglu" style="font-size: 30px; font-weight:800 ; margin-top:-20px;">登录或创建一个新账户</div>
                    <img class="img-denglu" src="图片/e3d850bd-bcf0-459f-b04a-2cae05448f59.png" width="70" height="70 " >
                </div>                    
                <div class="BUTTON" style="background-color: rgb(255, 255, 255);">
                    <div class="button-denglu">登录</div>
                    <br>
                    <div class="button-zhuce">注册</div>
                    <br>
                    <div class="button-club">关于星享俱乐部</div>
                </div>
            </div>    
        </div>
        <div class="scroll-container">
            <div class="YouShang" style="background-color: rgb(255, 255, 255);">
                <img class="youshang-img" src="图片/77a59fa9-e3da-4bcd-b7bb-af64bd19372e.png" style="width: 1300px;">
            </div>
            <div style="background-color:rgb(255, 255, 255) ;height:700px; width: 1300px; margin-left:550px;">
                <div style="background-color: rgb(255, 255, 255); width: 155px ; margin-left: 1140px; margin-top: 15px;" >
                    <img  src="图片/e59956c6-e223-4508-bf6d-436bab8c8e0e.png">
                </div>
                <div>
                    <input class="ShuRu" type="text" type="email" placeholder="用户名或者电子邮箱">
                    <br><br><br>
                    <input class="ShuRu" type="password" placeholder="密码">
                    <label class="custom-checkbox">
                    <input style="width: 30px; height: 30px;" type="checkbox" name="custom">
                    <span class="checkbox-icon"></span>
                    <div style="color: #6F6F6F; font-size: 18px;">下次自动登录</div>
                    <div style="color: #00A862 ; font-size: 25px; margin-left: 500px;" >忘记密码？</div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>